<template>
	<div class="slot-table">
		<vxe-grid
			border
			highlight-hover-row
			max-height="500"
			@cell-dblclick="cellDBLClickEvent"
			row-class-name="my-row"
			ref="xTree"
			:form-config="$attrs.config.tableForm"
			:data="$attrs.config.tableData"
			:columns="$attrs.config.tableColumn"
			@form-submit="findList"
			:tree-config="{
				children: 'children',
				iconOpen: 'el-icon-remove',
				iconClose: 'el-icon-circle-plus',
			}"
		>
			>
			<template v-slot:accountUnitCode="{ row }">
				<div>
					<template v-if="row.children && row.children.length">
						<i class="tree-node-icon" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'"></i>
					</template>
					<template v-else>
						<i class="tree-node-icon el-icon-document"></i>
					</template>
					<span>{{ row.accountUnitCode }}</span>
				</div>
			</template>
		</vxe-grid>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
		};
	},
	created() {
		this.findList();
	},
	methods: {
		/**
		 * 查找表格数据
		 */
		async findList() {
			this.$emit("loadata", this.$attrs.config.tableForm.data);
		},

		/**
		 * 双击单元格触发
		 */
		cellDBLClickEvent(event) {
			this.$emit("dbcell", event.row);
		},
	},
};
</script>

<style lang="scss" scoped>
.slot-table {
	::v-deep .myrow {
		cursor: pointer;
	}
}
</style>
